<template>
  <div class="activity-list-view">
    <!-- 页面头部 -->
    <div class="page-header glass-card">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="4"/>
              <line stroke="currentColor" stroke-width="2" x1="16" x2="16" y1="2" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="8" x2="8" y1="2" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="10" y2="10"/>
            </svg>
            活动管理
          </h1>
          <p class="page-subtitle">组织和参与精彩的家庭活动</p>
        </div>

        <div class="header-actions">
          <button class="action-btn secondary" @click="showCreateModal = true">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="8" y2="16"/>
              <line stroke="currentColor" stroke-width="2" x1="8" x2="16" y1="12" y2="12"/>
            </svg>
            快速创建
          </button>

          <router-link class="action-btn primary" to="/activity/create">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="13" r="3" stroke="currentColor" stroke-width="2"/>
            </svg>
            创建活动
          </router-link>
        </div>
      </div>
    </div>

    <!-- 过滤和搜索工具栏 -->
    <div class="toolbar glass-card">
      <div class="toolbar-left">
        <div class="search-box">
          <svg class="search-icon" fill="none" viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
            <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
          </svg>
          <input
            v-model="searchQuery"
            class="search-input"
            placeholder="搜索活动标题、地点或描述..."
            type="text"
            @input="handleSearch"
          />
          <button v-if="searchQuery" class="clear-search" @click="clearSearch">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>

        <div class="filter-tabs">
          <button
            v-for="tab in filterTabs"
            :key="tab.value"
            :class="{ active: activeFilter === tab.value }"
            class="filter-tab"
            @click="setActiveFilter(tab.value)"
          >
            <component :is="tab.icon" />
            {{ tab.label }}
            <span v-if="tab.count !== undefined" class="tab-count">{{ tab.count }}</span>
          </button>
        </div>
      </div>

      <div class="toolbar-right">
        <div class="view-controls">
          <button
            :class="{ active: viewMode === 'grid' }"
            class="view-btn"
            title="网格视图"
            @click="viewMode = 'grid'"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="3"/>
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="3"/>
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="14"/>
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="14"/>
            </svg>
          </button>

          <button
            :class="{ active: viewMode === 'list' }"
            class="view-btn"
            title="列表视图"
            @click="viewMode = 'list'"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="8" x2="21" y1="6" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="8" x2="21" y1="12" y2="12"/>
              <line stroke="currentColor" stroke-width="2" x1="8" x2="21" y1="18" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="3.01" y1="6" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="3.01" y1="12" y2="12"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="3.01" y1="18" y2="18"/>
            </svg>
          </button>

          <button
            :class="{ active: viewMode === 'calendar' }"
            class="view-btn"
            title="日历视图"
            @click="viewMode = 'calendar'"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="4"/>
              <line stroke="currentColor" stroke-width="2" x1="16" x2="16" y1="2" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="8" x2="8" y1="2" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="10" y2="10"/>
            </svg>
          </button>
        </div>

        <div class="sort-controls">
          <select v-model="sortBy" class="sort-select" @change="handleSort">
            <option value="startTime">按时间排序</option>
            <option value="title">按标题排序</option>
            <option value="participantCount">按参与人数排序</option>
            <option value="createTime">按创建时间排序</option>
          </select>

          <button
            :class="{ desc: sortOrder === 'desc' }"
            :title="sortOrder === 'asc' ? '升序' : '降序'"
            class="sort-order-btn"
            @click="toggleSortOrder"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <path d="m3 16 4 4 4-4M7 20V4M21 8l-4-4-4 4m4-4v16" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 活动统计卡片 -->
    <div class="stats-section">
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon upcoming">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.upcomingCount }}</div>
            <div class="stat-label">即将开始</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon ongoing">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <polyline points="10,8 16,12 10,16" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.ongoingCount }}</div>
            <div class="stat-label">正在进行</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon participants">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
              <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.totalParticipants }}</div>
            <div class="stat-label">总参与人数</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon completed">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2"/>
              <polyline points="22,4 12,14.01 9,11.01" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.completedCount }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 活动列表内容 -->
    <div class="content-section">
      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="activities-grid">
        <div
          v-for="activity in filteredActivities"
          :key="activity.id"
          class="activity-card"
          @click="viewActivity(activity.id)"
        >
          <div class="card-image">
            <img
              v-if="activity.coverImage"
              :alt="activity.title"
              :src="activity.coverImage"
            />
            <div v-else class="placeholder-image">
              <svg fill="none" viewBox="0 0 24 24">
                <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
              </svg>
            </div>

            <div class="card-overlay">
              <div :class="activity.status" class="card-status">
                {{ getStatusText(activity.status) }}
              </div>
              <div class="card-type">
                {{ getTypeIcon(activity.type) }} {{ getTypeText(activity.type) }}
              </div>
            </div>
          </div>

          <div class="card-content">
            <h3 class="card-title">{{ activity.title }}</h3>
            <p v-if="activity.description" class="card-description">{{ activity.description }}</p>

            <div class="card-meta">
              <div class="meta-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
                </svg>
                {{ formatDateTime(activity.startTime) }}
              </div>

              <div class="meta-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                  <path d="m8.21 13.89 3.79 2.11 3.79-2.11" stroke="currentColor" stroke-width="2"/>
                </svg>
                {{ activity.locationName }}
              </div>

              <div class="meta-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
                  <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                  <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2"/>
                </svg>
                {{ activity.participantCount }}/{{ activity.maxParticipants || '∞' }} 人
              </div>
            </div>
          </div>

          <div class="card-actions">
            <button
              v-if="activity.canParticipate"
              class="participate-btn"
              @click.stop="participateActivity(activity.id)"
            >
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
                <circle cx="8.5" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                <line stroke="currentColor" stroke-width="2" x1="20" x2="20" y1="8" y2="14"/>
                <line stroke="currentColor" stroke-width="2" x1="23" x2="17" y1="11" y2="11"/>
              </svg>
              {{ activity.isParticipating ? '已参加' : '参加' }}
            </button>

            <button class="more-btn" @click.stop="showActivityMenu(activity, $event)">
              <svg fill="none" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                <circle cx="19" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                <circle cx="5" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-else-if="viewMode === 'list'" class="activities-list glass-card">
        <div class="list-header">
          <div class="list-title">活动列表</div>
          <div class="list-count">共 {{ filteredActivities.length }} 个活动</div>
        </div>

        <div class="list-content">
          <div
            v-for="activity in filteredActivities"
            :key="activity.id"
            class="list-item"
            @click="viewActivity(activity.id)"
          >
            <div class="item-image">
              <img
                v-if="activity.coverImage"
                :alt="activity.title"
                :src="activity.coverImage"
              />
              <div v-else class="placeholder-image">
                {{ getTypeIcon(activity.type) }}
              </div>
            </div>

            <div class="item-content">
              <div class="item-header">
                <h3 class="item-title">{{ activity.title }}</h3>
                <div :class="activity.status" class="item-status">
                  {{ getStatusText(activity.status) }}
                </div>
              </div>

              <p v-if="activity.description" class="item-description">{{ activity.description }}</p>

              <div class="item-meta">
                <div class="meta-group">
                  <div class="meta-item">
                    <svg fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    {{ formatDateTime(activity.startTime) }}
                  </div>

                  <div class="meta-item">
                    <svg fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                      <path d="m8.21 13.89 3.79 2.11 3.79-2.11" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    {{ activity.locationName }}
                  </div>
                </div>

                <div class="meta-group">
                  <div class="meta-item">
                    <svg fill="none" viewBox="0 0 24 24">
                      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
                      <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    {{ activity.participantCount }} 人参与
                  </div>

                  <div class="meta-item">
                    <svg fill="none" viewBox="0 0 24 24">
                      <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="4"/>
                      <line stroke="currentColor" stroke-width="2" x1="16" x2="16" y1="2" y2="6"/>
                      <line stroke="currentColor" stroke-width="2" x1="8" x2="8" y1="2" y2="6"/>
                    </svg>
                    {{ getTypeText(activity.type) }}
                  </div>
                </div>
              </div>
            </div>

            <div class="item-actions">
              <button
                v-if="activity.canParticipate"
                :class="{ participating: activity.isParticipating }"
                class="participate-btn"
                @click.stop="participateActivity(activity.id)"
              >
                {{ activity.isParticipating ? '已参加' : '参加' }}
              </button>

              <button class="more-btn" @click.stop="showActivityMenu(activity, $event)">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                  <circle cx="19" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                  <circle cx="5" cy="12" r="1" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 日历视图 -->
      <div v-else-if="viewMode === 'calendar'" class="activities-calendar glass-card">
        <div class="calendar-header">
          <div class="calendar-title">
            {{ currentMonth.getFullYear() }}年{{ currentMonth.getMonth() + 1 }}月
          </div>
          <div class="calendar-controls">
            <button class="nav-btn" @click="previousMonth">
              <svg fill="none" viewBox="0 0 24 24">
                <polyline points="15,18 9,12 15,6" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>
            <button class="nav-btn" @click="nextMonth">
              <svg fill="none" viewBox="0 0 24 24">
                <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
              </svg>
            </button>
          </div>
        </div>

        <div class="calendar-grid">
          <div class="weekday-header">
            <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
          </div>

          <div class="days-grid">
            <div
              v-for="date in calendarDates"
              :key="date.key"
              :class="{
                'other-month': date.isOtherMonth,
                'today': date.isToday,
                'has-activities': date.activities.length > 0
              }"
              class="calendar-day"
            >
              <div class="day-number">{{ date.date.getDate() }}</div>
              <div v-if="date.activities.length > 0" class="day-activities">
                <div
                  v-for="activity in date.activities.slice(0, 2)"
                  :key="activity.id"
                  :class="activity.status"
                  :title="activity.title"
                  class="activity-dot"
                  @click="viewActivity(activity.id)"
                ></div>
                <div v-if="date.activities.length > 2" class="more-activities">
                  +{{ date.activities.length - 2 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredActivities.length === 0" class="empty-state glass-card">
        <div class="empty-content">
          <svg fill="none" viewBox="0 0 24 24">
            <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="4"/>
            <line stroke="currentColor" stroke-width="2" x1="16" x2="16" y1="2" y2="6"/>
            <line stroke="currentColor" stroke-width="2" x1="8" x2="8" y1="2" y2="6"/>
            <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="10" y2="10"/>
          </svg>
          <h3>{{ searchQuery ? '没有找到相关活动' : '还没有任何活动' }}</h3>
          <p>{{ searchQuery ? '尝试调整搜索条件' : '创建您的第一个家庭活动吧！' }}</p>
          <router-link v-if="!searchQuery" class="empty-action-btn" to="/activity/create">
            <svg fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="8" y2="16"/>
              <line stroke="currentColor" stroke-width="2" x1="8" x2="16" y1="12" y2="12"/>
            </svg>
            创建活动
          </router-link>
        </div>
      </div>
    </div>

    <!-- 活动菜单 -->
    <div v-if="showMenu" :style="menuPosition" class="activity-menu" @click.self="hideMenu">
      <div class="menu-content">
        <button class="menu-item" @click="viewActivity(selectedActivity?.id)">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
          </svg>
          查看详情
        </button>

        <button v-if="selectedActivity?.canEdit" class="menu-item" @click="editActivity(selectedActivity?.id)">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
            <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
          </svg>
          编辑活动
        </button>

        <button class="menu-item" @click="shareActivity(selectedActivity?.id)">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" stroke="currentColor" stroke-width="2"/>
            <polyline points="16,6 12,2 8,6" stroke="currentColor" stroke-width="2"/>
            <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="2" y2="15"/>
          </svg>
          分享活动
        </button>

        <button v-if="selectedActivity?.canDelete" class="menu-item danger" @click="deleteActivity(selectedActivity?.id)">
          <svg fill="none" viewBox="0 0 24 24">
            <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2"/>
          </svg>
          删除活动
        </button>
      </div>
    </div>

    <!-- 快速创建模态框 -->
    <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
      <div class="modal-dialog">
        <div class="modal-header">
          <h3>快速创建活动</h3>
          <button class="modal-close" @click="showCreateModal = false">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>

        <div class="modal-body">
          <div class="quick-templates">
            <button
              v-for="template in quickTemplates"
              :key="template.id"
              class="template-btn"
              @click="createFromTemplate(template)"
            >
              <div class="template-icon">{{ template.icon }}</div>
              <div class="template-content">
                <div class="template-title">{{ template.title }}</div>
                <div class="template-description">{{ template.description }}</div>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'

const router = useRouter()

interface Activity {
  id: number
  title: string
  description: string
  type: string
  status: string
  startTime: string
  endTime: string
  locationName: string
  coverImage?: string
  participantCount: number
  maxParticipants?: number
  isParticipating: boolean
  canParticipate: boolean
  canEdit: boolean
  canDelete: boolean
  createTime: string
}

interface ActivityStatistics {
  upcomingCount: number
  ongoingCount: number
  completedCount: number
  totalParticipants: number
}

interface QuickTemplate {
  id: number
  icon: string
  title: string
  description: string
  type: string
}

// 响应式数据
const searchQuery = ref('')
const activeFilter = ref('all')
const viewMode = ref<'grid' | 'list' | 'calendar'>('grid')
const sortBy = ref('startTime')
const sortOrder = ref<'asc' | 'desc'>('asc')
const showMenu = ref(false)
const showCreateModal = ref(false)
const selectedActivity = ref<Activity | null>(null)
const menuPosition = ref({ top: '0px', left: '0px' })
const currentMonth = ref(new Date())

const activities = ref<Activity[]>([])
const statistics = ref<ActivityStatistics>({
  upcomingCount: 0,
  ongoingCount: 0,
  completedCount: 0,
  totalParticipants: 0
})

const filterTabs = [
  { label: '全部', value: 'all', icon: 'AllIcon', count: undefined },
  { label: '即将开始', value: 'upcoming', icon: 'UpcomingIcon', count: 5 },
  { label: '进行中', value: 'ongoing', icon: 'OngoingIcon', count: 2 },
  { label: '已完成', value: 'completed', icon: 'CompletedIcon', count: 8 },
  { label: '我参与的', value: 'participating', icon: 'ParticipatingIcon', count: 7 }
]

const quickTemplates: QuickTemplate[] = [
  {
    id: 1,
    icon: '🍽️',
    title: '家庭聚餐',
    description: '温馨的家庭聚餐时光',
    type: 'dining'
  },
  {
    id: 2,
    icon: '✈️',
    title: '周末出游',
    description: '放松身心的短途旅行',
    type: 'travel'
  },
  {
    id: 3,
    icon: '🎉',
    title: '生日庆祝',
    description: '特别的生日庆祝活动',
    type: 'celebration'
  },
  {
    id: 4,
    icon: '🏃‍♂️',
    title: '户外运动',
    description: '健康有趣的运动时光',
    type: 'sports'
  }
]

const weekdays = ['日', '一', '二', '三', '四', '五', '六']

// 计算属性
const filteredActivities = computed(() => {
  let filtered = activities.value

  // 按分类过滤
  if (activeFilter.value !== 'all') {
    filtered = filtered.filter(activity => {
      switch (activeFilter.value) {
        case 'upcoming':
          return activity.status === 'published' && new Date(activity.startTime) > new Date()
        case 'ongoing':
          return activity.status === 'ongoing'
        case 'completed':
          return activity.status === 'completed'
        case 'participating':
          return activity.isParticipating
        default:
          return true
      }
    })
  }

  // 按搜索关键词过滤
  if (searchQuery.value.trim() !== '') {
    const query = searchQuery.value.trim().toLowerCase()
    filtered = filtered.filter(activity =>
      activity.title.toLowerCase().includes(query) ||
      activity.description.toLowerCase().includes(query) ||
      activity.locationName.toLowerCase().includes(query)
    )
  }

  // 排序
  filtered.sort((a, b) => {
    let aValue: any = a[sortBy.value as keyof Activity]
    let bValue: any = b[sortBy.value as keyof Activity]

    if (sortBy.value === 'startTime' || sortBy.value === 'createTime') {
      aValue = new Date(aValue).getTime()
      bValue = new Date(bValue).getTime()
    }

    if (typeof aValue === 'string') {
      aValue = aValue.toLowerCase()
      bValue = bValue.toLowerCase()
    }

    const result = aValue < bValue ? -1 : aValue > bValue ? 1 : 0
    return sortOrder.value === 'asc' ? result : -result
  })

  return filtered
})

const calendarDates = computed(() => {
  const year = currentMonth.value.getFullYear()
  const month = currentMonth.value.getMonth()

  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  const startDate = new Date(firstDay)
  startDate.setDate(startDate.getDate() - firstDay.getDay())

  const dates = []
  const currentDate = new Date(startDate)

  for (let i = 0; i < 42; i++) {
    const date = new Date(currentDate)
    const dateActivities = activities.value.filter(activity => {
      const activityDate = new Date(activity.startTime)
      return activityDate.toDateString() === date.toDateString()
    })

    dates.push({
      key: date.toISOString(),
      date,
      isOtherMonth: date.getMonth() !== month,
      isToday: date.toDateString() === new Date().toDateString(),
      activities: dateActivities
    })

    currentDate.setDate(currentDate.getDate() + 1)
  }

  return dates
})

// 方法
const handleSearch = () => {
  // 搜索逻辑在计算属性中处理
}

const clearSearch = () => {
  searchQuery.value = ''
}

const setActiveFilter = (filter: string) => {
  activeFilter.value = filter
}

const handleSort = () => {
  // 排序逻辑在计算属性中处理
}

const toggleSortOrder = () => {
  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
}

const viewActivity = (id: number) => {
  router.push(`/activity/${id}`)
}

const editActivity = (id: number) => {
  router.push(`/activity/edit/${id}`)
  hideMenu()
}

const participateActivity = (id: number) => {
  const activity = activities.value.find(a => a.id === id)
  if (activity) {
    activity.isParticipating = !activity.isParticipating
    activity.participantCount += activity.isParticipating ? 1 : -1

    Notify({
      type: 'success',
      message: activity.isParticipating ? '参与成功！' : '取消参与',
      position: 'top-right'
    })
  }
}

const shareActivity = (id: number) => {
  // 模拟分享功能
  Notify({
    type: 'success',
    message: '分享链接已复制到剪贴板',
    position: 'top-right'
  })
  hideMenu()
}

const deleteActivity = (id: number) => {
  if (confirm('确定要删除这个活动吗？')) {
    activities.value = activities.value.filter(a => a.id !== id)
    Notify({
      type: 'success',
      message: '活动已删除',
      position: 'top-right'
    })
  }
  hideMenu()
}

const showActivityMenu = (activity: Activity, event: Event) => {
  selectedActivity.value = activity
  const rect = (event.target as HTMLElement).getBoundingClientRect()
  menuPosition.value = {
    top: (rect.bottom + window.scrollY) + 'px',
    left: (rect.left + window.scrollX - 150) + 'px'
  }
  showMenu.value = true
}

const hideMenu = () => {
  showMenu.value = false
  selectedActivity.value = null
}

const createFromTemplate = (template: QuickTemplate) => {
  showCreateModal.value = false
  router.push({
    path: '/activity/create',
    query: { template: template.id }
  })
}

const previousMonth = () => {
  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)
}

const nextMonth = () => {
  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)
}

const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    draft: '草稿',
    published: '已发布',
    ongoing: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const getTypeText = (type: string): string => {
  const typeMap: Record<string, string> = {
    family: '家庭聚会',
    dining: '聚餐聚食',
    travel: '旅行出游',
    sports: '运动健身',
    entertainment: '娱乐休闲',
    learning: '学习培训',
    celebration: '庆祝活动',
    outdoor: '户外活动',
    culture: '文化艺术',
    volunteer: '志愿服务',
    other: '其他活动'
  }
  return typeMap[type] || type
}

const getTypeIcon = (type: string): string => {
  const iconMap: Record<string, string> = {
    family: '👨‍👩‍👧‍👦',
    dining: '🍽️',
    travel: '✈️',
    sports: '🏃‍♂️',
    entertainment: '🎮',
    learning: '📚',
    celebration: '🎉',
    outdoor: '🌲',
    culture: '🎭',
    volunteer: '🤝',
    other: '📝'
  }
  return iconMap[type] || '📝'
}

const formatDateTime = (dateTime: string): string => {
  const date = new Date(dateTime)
  const now = new Date()
  const diffTime = date.getTime() - now.getTime()
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

  if (diffDays === 0) {
    return '今天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else if (diffDays === 1) {
    return '明天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else if (diffDays === -1) {
    return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else {
    return date.toLocaleDateString('zh-CN', {
      month: 'numeric',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
}

// 页面初始化
onMounted(() => {
  // 模拟加载活动数据
  activities.value = [
    {
      id: 1,
      title: '周末家庭聚餐',
      description: '准备一顿丰盛的家庭聚餐，大家一起分享美食和欢乐时光。',
      type: 'dining',
      status: 'published',
      startTime: '2024-01-27T18:00:00',
      endTime: '2024-01-27T20:00:00',
      locationName: '家里',
      coverImage: '/images/family-dinner.jpg',
      participantCount: 6,
      maxParticipants: 8,
      isParticipating: true,
      canParticipate: true,
      canEdit: true,
      canDelete: true,
      createTime: '2024-01-20T10:00:00'
    },
    {
      id: 2,
      title: '春节大扫除',
      description: '全家一起进行年终大扫除，为新年做准备。',
      type: 'family',
      status: 'ongoing',
      startTime: '2024-01-25T09:00:00',
      endTime: '2024-01-25T17:00:00',
      locationName: '家里',
      participantCount: 4,
      maxParticipants: 6,
      isParticipating: true,
      canParticipate: false,
      canEdit: true,
      canDelete: true,
      createTime: '2024-01-20T15:30:00'
    },
    {
      id: 3,
      title: '公园踏青活动',
      description: '春天来了，一起去公园踏青，感受大自然的美好。',
      type: 'outdoor',
      status: 'published',
      startTime: '2024-02-03T14:00:00',
      endTime: '2024-02-03T17:00:00',
      locationName: '市中心公园',
      participantCount: 3,
      maxParticipants: 10,
      isParticipating: false,
      canParticipate: true,
      canEdit: false,
      canDelete: false,
      createTime: '2024-01-22T11:20:00'
    }
  ]

  // 计算统计数据
  statistics.value = {
    upcomingCount: activities.value.filter(a =>
      a.status === 'published' && new Date(a.startTime) > new Date()
    ).length,
    ongoingCount: activities.value.filter(a => a.status === 'ongoing').length,
    completedCount: activities.value.filter(a => a.status === 'completed').length,
    totalParticipants: activities.value.reduce((total, a) => total + a.participantCount, 0)
  }

  // 点击外部隐藏菜单
  document.addEventListener('click', (e) => {
    if (!e.target || !(e.target as Element).closest('.activity-menu')) {
      hideMenu()
    }
  })
})
</script>

<style lang="scss" scoped>
.activity-list-view {
  background: #f8fafc;
  min-height: 100vh;
  padding: 2rem;

  .page-header {
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        .page-title {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.75rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 0.5rem 0;

          svg {
            width: 28px;
            height: 28px;
            color: #3b82f6;
          }
        }

        .page-subtitle {
          color: #64748b;
          margin: 0;
          font-size: 1rem;
        }
      }

      .header-actions {
        display: flex;
        gap: 1rem;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          border-radius: 8px;
          border: none;
          font-weight: 500;
          cursor: pointer;
          text-decoration: none;
          transition: all 0.2s ease;

          svg {
            width: 16px;
            height: 16px;
          }

          &.secondary {
            background: #f1f5f9;
            color: #475569;

            &:hover {
              background: #e2e8f0;
            }
          }

          &.primary {
            background: #3b82f6;
            color: white;

            &:hover {
              background: #2563eb;
            }
          }
        }
      }
    }
  }

  .toolbar {
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;

    .toolbar-left {
      display: flex;
      align-items: center;
      gap: 2rem;
      flex: 1;

      .search-box {
        position: relative;
        min-width: 300px;

        .search-icon {
          position: absolute;
          left: 0.75rem;
          top: 50%;
          transform: translateY(-50%);
          width: 16px;
          height: 16px;
          color: #9ca3af;
        }

        .search-input {
          width: 100%;
          padding: 0.75rem 0.75rem 0.75rem 2.5rem;
          border: 1px solid #d1d5db;
          border-radius: 8px;
          font-size: 0.9rem;
          background: white;

          &:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }

          &::placeholder {
            color: #9ca3af;
          }
        }

        .clear-search {
          position: absolute;
          right: 0.5rem;
          top: 50%;
          transform: translateY(-50%);
          width: 24px;
          height: 24px;
          border: none;
          background: none;
          color: #9ca3af;
          cursor: pointer;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background: #f3f4f6;
            color: #6b7280;
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }

      .filter-tabs {
        display: flex;
        gap: 0.5rem;

        .filter-tab {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          border: 1px solid #e5e7eb;
          border-radius: 20px;
          background: white;
          color: #6b7280;
          cursor: pointer;
          font-size: 0.85rem;
          font-weight: 500;
          transition: all 0.2s ease;

          &:hover {
            background: #f9fafb;
            border-color: #d1d5db;
          }

          &.active {
            background: #3b82f6;
            border-color: #3b82f6;
            color: white;
          }

          .tab-count {
            background: rgba(255, 255, 255, 0.2);
            padding: 0.1rem 0.5rem;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 600;
          }
        }
      }
    }

    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 1rem;

      .view-controls {
        display: flex;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: white;

        .view-btn {
          padding: 0.5rem;
          border: none;
          background: none;
          color: #6b7280;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          &:first-child {
            border-radius: 8px 0 0 8px;
          }

          &:last-child {
            border-radius: 0 8px 8px 0;
          }

          &:not(:last-child) {
            border-right: 1px solid #e5e7eb;
          }

          &:hover {
            background: #f9fafb;
            color: #374151;
          }

          &.active {
            background: #3b82f6;
            color: white;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }

      .sort-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .sort-select {
          padding: 0.5rem;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          background: white;
          color: #374151;
          font-size: 0.85rem;

          &:focus {
            outline: none;
            border-color: #3b82f6;
          }
        }

        .sort-order-btn {
          width: 32px;
          height: 32px;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          background: white;
          color: #6b7280;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          &:hover {
            background: #f9fafb;
            border-color: #d1d5db;
          }

          &.desc {
            color: #3b82f6;
            background: #eff6ff;
            border-color: #3b82f6;
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }

  .stats-section {
    margin-bottom: 2rem;

    .stats-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.5rem;

      .stat-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;

          &.upcoming {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.ongoing {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.participants {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          &.completed {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }

          svg {
            width: 20px;
            height: 20px;
          }
        }

        .stat-content {
          .stat-number {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1;
          }

          .stat-label {
            color: #64748b;
            font-size: 0.85rem;
            margin-top: 0.25rem;
          }
        }
      }
    }
  }

  .content-section {
    .activities-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 1.5rem;

      .activity-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .card-image {
          position: relative;
          height: 160px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .placeholder-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;

            svg {
              width: 48px;
              height: 48px;
            }
          }

          .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent, rgba(0, 0, 0, 0.3));
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 1rem;

            .card-status {
              padding: 0.25rem 0.75rem;
              border-radius: 20px;
              font-size: 0.75rem;
              font-weight: 600;
              backdrop-filter: blur(10px);

              &.draft {
                background: rgba(107, 114, 128, 0.8);
                color: white;
              }

              &.published {
                background: rgba(59, 130, 246, 0.8);
                color: white;
              }

              &.ongoing {
                background: rgba(34, 197, 94, 0.8);
                color: white;
              }

              &.completed {
                background: rgba(156, 163, 175, 0.8);
                color: white;
              }

              &.cancelled {
                background: rgba(239, 68, 68, 0.8);
                color: white;
              }
            }

            .card-type {
              padding: 0.25rem 0.75rem;
              border-radius: 20px;
              font-size: 0.75rem;
              font-weight: 500;
              background: rgba(255, 255, 255, 0.9);
              color: #374151;
              backdrop-filter: blur(10px);
            }
          }
        }

        .card-content {
          padding: 1.5rem;

          .card-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.5rem 0;
            line-height: 1.4;
          }

          .card-description {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0 0 1rem 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .card-meta {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .meta-item {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              font-size: 0.8rem;
              color: #6b7280;

              svg {
                width: 14px;
                height: 14px;
                color: #9ca3af;
                flex-shrink: 0;
              }
            }
          }
        }

        .card-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 1.5rem 1.5rem;

          .participate-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            transition: background 0.2s ease;

            &:hover {
              background: #2563eb;
            }

            svg {
              width: 14px;
              height: 14px;
            }
          }

          .more-btn {
            width: 32px;
            height: 32px;
            border: 1px solid #e5e7eb;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            transition: all 0.2s ease;

            &:hover {
              background: #f9fafb;
              border-color: #d1d5db;
            }

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }
    }

    .activities-list {
      padding: 0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        border-bottom: 1px solid #f1f5f9;
        background: #f8fafc;

        .list-title {
          font-size: 1.125rem;
          font-weight: 600;
          color: #1e293b;
        }

        .list-count {
          color: #64748b;
          font-size: 0.9rem;
        }
      }

      .list-content {
        .list-item {
          display: flex;
          align-items: center;
          gap: 1.5rem;
          padding: 1.5rem 2rem;
          cursor: pointer;
          transition: background 0.2s ease;
          border-bottom: 1px solid #f1f5f9;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background: #f8fafc;
          }

          .item-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .placeholder-image {
              width: 100%;
              height: 100%;
              background: #e5e7eb;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 1.5rem;
            }
          }

          .item-content {
            flex: 1;

            .item-header {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              margin-bottom: 0.5rem;

              .item-title {
                font-size: 1.125rem;
                font-weight: 600;
                color: #1e293b;
                margin: 0;
                line-height: 1.4;
              }

              .item-status {
                padding: 0.25rem 0.75rem;
                border-radius: 20px;
                font-size: 0.75rem;
                font-weight: 600;

                &.draft {
                  background: #f3f4f6;
                  color: #6b7280;
                }

                &.published {
                  background: #dbeafe;
                  color: #1d4ed8;
                }

                &.ongoing {
                  background: #dcfce7;
                  color: #16a34a;
                }

                &.completed {
                  background: #f1f5f9;
                  color: #64748b;
                }

                &.cancelled {
                  background: #fef2f2;
                  color: #dc2626;
                }
              }
            }

            .item-description {
              color: #64748b;
              font-size: 0.9rem;
              line-height: 1.5;
              margin: 0 0 1rem 0;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .item-meta {
              display: flex;
              justify-content: space-between;

              .meta-group {
                display: flex;
                gap: 1.5rem;

                .meta-item {
                  display: flex;
                  align-items: center;
                  gap: 0.5rem;
                  font-size: 0.8rem;
                  color: #6b7280;

                  svg {
                    width: 14px;
                    height: 14px;
                    color: #9ca3af;
                  }
                }
              }
            }
          }

          .item-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;

            .participate-btn {
              padding: 0.5rem 1rem;
              background: #3b82f6;
              color: white;
              border: none;
              border-radius: 6px;
              cursor: pointer;
              font-size: 0.85rem;
              font-weight: 500;
              transition: background 0.2s ease;

              &:hover {
                background: #2563eb;
              }

              &.participating {
                background: #16a34a;

                &:hover {
                  background: #15803d;
                }
              }
            }

            .more-btn {
              width: 32px;
              height: 32px;
              border: 1px solid #e5e7eb;
              background: white;
              border-radius: 6px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #6b7280;
              transition: all 0.2s ease;

              &:hover {
                background: #f9fafb;
                border-color: #d1d5db;
              }

              svg {
                width: 14px;
                height: 14px;
              }
            }
          }
        }
      }
    }

    .activities-calendar {
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;

        .calendar-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #1e293b;
        }

        .calendar-controls {
          display: flex;
          gap: 0.5rem;

          .nav-btn {
            width: 40px;
            height: 40px;
            border: 1px solid #e5e7eb;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            transition: all 0.2s ease;

            &:hover {
              background: #f9fafb;
              border-color: #d1d5db;
            }

            svg {
              width: 16px;
              height: 16px;
            }
          }
        }
      }

      .calendar-grid {
        .weekday-header {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 1px;
          margin-bottom: 1px;

          .weekday {
            padding: 1rem;
            text-align: center;
            font-weight: 600;
            color: #6b7280;
            background: #f8fafc;
          }
        }

        .days-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 1px;
          background: #e5e7eb;

          .calendar-day {
            min-height: 100px;
            padding: 0.75rem;
            background: white;
            cursor: pointer;
            transition: background 0.2s ease;

            &:hover {
              background: #f8fafc;
            }

            &.other-month {
              background: #f8fafc;
              color: #9ca3af;
            }

            &.today {
              background: #eff6ff;
              border: 2px solid #3b82f6;
            }

            &.has-activities {
              background: #fef3c7;
            }

            .day-number {
              font-weight: 600;
              color: #374151;
              margin-bottom: 0.5rem;
            }

            .day-activities {
              display: flex;
              flex-wrap: wrap;
              gap: 2px;

              .activity-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                cursor: pointer;

                &.published {
                  background: #3b82f6;
                }

                &.ongoing {
                  background: #16a34a;
                }

                &.completed {
                  background: #6b7280;
                }
              }

              .more-activities {
                font-size: 0.7rem;
                color: #6b7280;
                margin-left: 0.25rem;
              }
            }
          }
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 4rem 2rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .empty-content {
        svg {
          width: 64px;
          height: 64px;
          color: #d1d5db;
          margin-bottom: 1.5rem;
        }

        h3 {
          font-size: 1.25rem;
          font-weight: 600;
          color: #374151;
          margin: 0 0 0.5rem 0;
        }

        p {
          color: #6b7280;
          margin: 0 0 1.5rem 0;
          font-size: 1rem;
        }

        .empty-action-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          background: #3b82f6;
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          text-decoration: none;
          font-weight: 500;
          transition: background 0.2s ease;

          &:hover {
            background: #2563eb;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }

  .activity-menu {
    position: fixed;
    z-index: 50;

    .menu-content {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      min-width: 150px;
      overflow: hidden;

      .menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.75rem 1rem;
        border: none;
        background: none;
        text-align: left;
        color: #374151;
        cursor: pointer;
        transition: background 0.2s ease;

        &:hover {
          background: #f3f4f6;
        }

        &.danger {
          color: #ef4444;

          &:hover {
            background: #fef2f2;
          }
        }

        svg {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;

    .modal-dialog {
      background: white;
      border-radius: 12px;
      width: 90vw;
      max-width: 500px;

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 1.5rem 1rem;

        h3 {
          margin: 0;
          color: #1e293b;
        }

        .modal-close {
          background: none;
          border: none;
          color: #6b7280;
          cursor: pointer;
          padding: 0.25rem;

          svg {
            width: 20px;
            height: 20px;
          }
        }
      }

      .modal-body {
        padding: 0 1.5rem 1.5rem;

        .quick-templates {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;

          .template-btn {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: 100%;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;

            &:hover {
              background: #f9fafb;
              border-color: #3b82f6;
            }

            .template-icon {
              font-size: 2rem;
            }

            .template-content {
              .template-title {
                font-weight: 600;
                color: #374151;
                margin-bottom: 0.25rem;
              }

              .template-description {
                color: #6b7280;
                font-size: 0.9rem;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .activity-list-view {
    padding: 1.5rem;

    .toolbar {
      flex-direction: column;
      gap: 1rem;
      align-items: stretch;

      .toolbar-left,
      .toolbar-right {
        justify-content: center;
      }

      .search-box {
        min-width: auto;
      }

      .filter-tabs {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    .activities-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
    }
  }
}

@media (max-width: 768px) {
  .activity-list-view {
    padding: 1rem;

    .page-header .header-content {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }

    .stats-cards {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;

      .stat-card {
        padding: 1rem;

        .stat-icon {
          width: 40px;
          height: 40px;

          svg {
            width: 18px;
            height: 18px;
          }
        }

        .stat-content .stat-number {
          font-size: 1.5rem;
        }
      }
    }

    .activities-grid {
      grid-template-columns: 1fr;
    }

    .activities-list .list-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;

      .item-image {
        width: 100%;
        height: 120px;
      }

      .item-actions {
        width: 100%;
        justify-content: space-between;
      }
    }

    .activities-calendar .calendar-grid .days-grid .calendar-day {
      min-height: 80px;
      padding: 0.5rem;
    }
  }
}
</style>
